import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import { routerShape } from 'react-router';

import {Checkbox} from "antd"

import TopSearchPanel from "./TopSearchPanel"
import {WeaNewScroll,WeaInputSearch} from 'ecCom';
import WeaWhitePage from "../../../Component/wea-white-page"
import CreateGroupModal from "../Attention/CreateGroupModal"
import ShareToMe from "./ShareToMe"

import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyBlog')
@observer
class ShareToMes extends Component {
    static contextTypes = {
        router: routerShape
    }

    constructor(props) {
        super(props)
        this.state = this.initData()
    }

    initData = () => {
        return {
            checksCount: 0,
            checksValue: false,
            indeterminateValue: false,

            selectValue: "",
            selectName: "",

            currentGroup: {
                groupId: "all",
                groupName: getLabel(384389,"全部关注")
            },

            // data: []
        }
    }

    componentWillReceiveProps(props) {
        // if(this.state.data.length == 0){
            // const {data} = props
            // this.setState({data: data})
        // }
    }

    get userIdsString() {
        return this.getCheckedValue("userId")
    }

    get isLowersString() {
        return this.getCheckedValue("islower")
    }

    getCheckedValue = (name) => {
        let {shareToMeUserList} = toJS(this.props.blogMyBlog.status)
        let data = shareToMeUserList.shareToMeUserList || [];
        if (name) {
            let result = []
            data.forEach(
                item => {
                    if (item.checked) {
                        result.push(item[name])
                    }
                }
            )
            return result.join(",")
        } else {
            return ""
        }
    }

    set clearData(value) {
        if (value) this.setState({
            checksCount: 0,
            checksValue: false,
            indeterminateValue: false,

            selectValue: "",
            selectName: "",
        })
    }
    cancelAttionCount = () => {
        let {checksCount,checksValue} = this.state;
        if((checksCount-1)==0){
            checksValue = false;
        };
        this.setState({checksCount:checksCount-1,checksValue:checksValue})
    }

    render() {
        let {shareToMeUserList} = toJS(this.props.blogMyBlog.status)
        let data = shareToMeUserList.shareToMeUserList || [];
        
        let {checksValue, checksCount, indeterminateValue,  currentGroup} = this.state,
            {weiboGroup, height, changeGroup} = this.props,
            groups = weiboGroup.groupList || [],
            groupsBefore = [],
            groupsAfter = [],
            groupsAttention = []

            // console.log('groups',weiboGroup)
        groups.forEach(
            item => {
                if ((item.groupId == "all") || (item.groupId == "nogroup")) {
                    groupsBefore.push(item)
                    if (item.groupId == "nogroup") {
                        groupsAttention.push(item)
                    }
                } else {
                    groupsAfter.push(item)
                    groupsAttention.push(item)
                }
            }
        )
        return (
            <div className="wea-myBlog-fan">
                <TopSearchPanel ecId={`${this && this.props && this.props.ecId || ''}_TopSearchPanel@32trzk`}
                    groupsBefore={groupsBefore}
                    groupsAfter={groupsAfter}
                    status={indeterminateValue}
                    changeGroup={this.changeGroup}
                    defaultGroup={currentGroup}
                />
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@6a03oq`} height={height - 45}>
                <div style={{padding: "16px 16px 8px 16px"}}>
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@hz0b8i`}
                        className={"wea-fft-check " + (indeterminateValue ? "wea-checkbox-indeterminate" : "")}
                        checked={checksValue}
                        onChange={this.onChecks}
                        indeterminate={indeterminateValue}
                    >{getLabel(556,"全选")}</Checkbox>
                    <span>
                        &nbsp;&nbsp;&nbsp;{getLabel(31503,"已选择")}&nbsp;
                        <span style={{color: '#32a8ff'}}>{checksCount}</span>
                        &nbsp;{getLabel(384340,"个对象")}
                    </span>
                </div>

                {
                    data.length ? (
                        <div style={{padding: "0 8px"}}>
                            {
                                data.map(
                                    item => {
                                        return (
                                            <ShareToMe ecId={`${this && this.props && this.props.ecId || ''}_ShareToMe@bwepm7@${item.userId}`}
                                                type="attention"
                                                groups={groupsAttention}
                                                data={item}
                                                onCheck={this.onCheck}
                                                cancelAttionCount={this.cancelAttionCount}
                                                group={currentGroup}
                                            />
                                        )
                                    }
                                )
                            }
                        </div>
                    ) : <WeaWhitePage ecId={`${this && this.props && this.props.ecId || ''}_WeaWhitePage@swdscm`} height={height}/>
                }
                </WeaNewScroll>
                <CreateGroupModal ecId={`${this && this.props && this.props.ecId || ''}_CreateGroupModal@c9s5xt`} requestData={this.createOrEditGroup} />
            </div>
        )
    }

    createOrEditGroup = (params) => {
        const {moduleStatus} = this.props.blogMyBlog;
        if(moduleStatus.createOrEdit=='create'){
            this.createGroup(params);
        }else if(moduleStatus.createOrEdit=='edit'){
            this.editGroup(params);
        }else if(moduleStatus.createOrEdit=='createAndMove' || moduleStatus.createOrEdit=='createAndCopy'){
            this.props.selectGroup(moduleStatus.createOrEdit,params.groupName);
            moduleStatus.showGroupCreate=false;
            this.props.onCheck(false);
        }
    }

    createGroup = (params) => {
        const {createGroup, getWeiboGroup, getAttentionList,moduleStatus} = this.props.blogMyBlog;
        createGroup(
            params,
            result => {
                let {status, groupInfo} = result,
                    {groupId, groupName} = groupInfo
                if (status == "1" && groupId) {
                    getWeiboGroup()
                    getAttentionList(
                        {groupId: groupId}
                    )
                    this.changeGroup({groupId: groupId, groupName: groupName})
                    
                }
            }
        )
        moduleStatus.showGroupCreate=false;
    }

    editGroup = (params) => {
        const {editGroup, getAttentionList,moduleStatus} = this.props.blogMyBlog;
        editGroup(
            params,
            result => {
                let {status, groupInfo} = result,
                    {groupId, groupName} = groupInfo
                if (status == "1" && groupId) {
                    getAttentionList(
                        {groupId: groupId}
                    )
                    this.changeGroup({groupId: groupId, groupName: groupName})
                }
            }
        )
        moduleStatus.showGroupCreate=false;
    }

    getList = (params) => {
        const {getAttentionList } = this.props.blogMyBlog
        
        getAttentionList(params)
    }

    changeGroup = (value) => {
        let {attentionListOnSelect} = this.props.blogMyBlog
        // attentionListOnSelect([]);
        this.setState({checksValue: false, checksCount: 0, indeterminateValue: false, currentGroup: value})
        this.props.onCheck(false)
        this.props.changeGroup(value)
    }

    onChecks = (e) => {
        let {shareToMeUserListOnSelect,isCheckDis} = this.props.blogMyBlog
        let {shareToMeUserList} = toJS(this.props.blogMyBlog.status)
        let data = shareToMeUserList.shareToMeUserList || [];
        let checksValue = e.target.checked,
            _data = data.map(
                item => {
                    item.checked = checksValue
                    return item
                }
            ),
            _checksCount = checksValue ? data.length : 0
        this.setState({checksValue: checksValue, checksCount: _checksCount, indeterminateValue: false})
        shareToMeUserListOnSelect(shareToMeUserList:_data)
        isCheckDis(_checksCount==0?false:true);
        this.props.onCheck(!!_checksCount)
    }

    onCheck = (userId, e) => {
        let {shareToMeUserListOnSelect,isCheckDis} = this.props.blogMyBlog
        let {shareToMeUserList} = toJS(this.props.blogMyBlog.status)
        let data = shareToMeUserList.shareToMeUserList || [];
        
        let {  checksValue, checksCount, indeterminateValue} = this.state,
            checkValue = e.target.checked,
            _checksValue = checksValue,
            _checksCount = checksCount,
            _indeterminateValue = indeterminateValue,
            _data = data.map(
                item => {
                    let newItem = {...item}
                    if (item.userId == userId) {
                        // item.checked = checkValue
                        newItem = {...item,checked:checkValue}
                        if (checkValue) {
                            _checksCount++
                        } else {
                            _checksCount--
                            if (checksValue) {
                                _checksValue = false
                            }
                        }
                    }
                    return newItem
                }
            )
            let __data = [..._data]
        if (_checksCount == data.length) _checksValue = true
        if (_checksCount > 0 && _checksCount < data.length) {_indeterminateValue = true}
        else {_indeterminateValue = false}
        shareToMeUserListOnSelect({shareToMeUserList:__data});
        isCheckDis(_checksCount==0?false:true);
        this.setState({
            // data: __data,
            checksValue: _checksValue,
            checksCount: _checksCount,
            indeterminateValue: _indeterminateValue
        })
        this.props.onCheck(!!_checksCount)
    }
}

export default ShareToMes